<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<title>验证码使用示例</title>
		<style type="text/css">
			ul,li{margin:0; padding:0;}
			form{margin:40px 30px 0;}
			form li{list-style:none; padding:5px 0;}
			form li label{float:left; width:70px; text-align:right;}
			form li a{font-size:12px; color:#999; text-decoration:none;}
			.login_btn{border:none; background:#01A4F1; color:#fff; 
 			font-size:14px;font-weight:bold; height:28px; line-height:28px; 
 			padding:0 10px; cursor:pointer;}
			form li img{vertical-align:top;}
		</style>
	</head>
 	<body>
		<form action="login.php" method="POST">
			<fieldset>
				<legend>用户登录</legend>
				<ul>
					<li>
						<label for="">用户名：</label> 
						<input type="text" name="username" />
					</li>
					<li>
					<label for="">密 码：</label> 
						<input type="password" name="password" />
				</li>
				<li>
					<label for="">验证码：</label> 
						<input type="text" name="captcha" />
					<img src="code.php" alt="" id="code_img"/>  
					<a href="" id="change">看不清，换一张</a>
				</li>
				<li>
					<label for="">&nbsp;</label> 
					<input type="submit" value="登 录" class="login_btn" />
				</li>
			</ul>
		</fieldset>		
	</form>
	<script type="text/javascript">
		var change = document.getElementById("change");
		var img = document.getElementById("code_img");
		change.onclick = function(){
			img.src = "code.php?t="+new Date(); //增加一个随机参数，防止图片缓存
			return false; //阻止超链接的跳转动作
		}
	</script>
	</body>
</html>
